<template>
  <div class="app-container">

     <!-- -->
    <el-card class="box-card">
       <el-form :inline="true" :model="queryForm" class="demo-form-inline">

         <el-form-item label="状态">
           <el-select v-model="queryForm.status" multiple placeholder="请选择">
             <el-option label="已完成" value="shanghai"></el-option>
             <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>


         <el-form-item label="资产编号">
           <el-input v-model="queryForm.loginName" placeholder="资产编号"></el-input>
         </el-form-item>

         <el-form-item label="规格型号">
           <el-input v-model="queryForm.size" placeholder="规格型号"></el-input>
         </el-form-item>

         <el-form-item label="资产名称">
           <el-input v-model="queryForm.name" placeholder="资产名称"></el-input>
         </el-form-item>

         <el-form-item>
           <el-button type="primary" @click="handlerQuery" >查询</el-button>
         </el-form-item>
       </el-form>
    </el-card>


   <!--  表格-->
    <el-table  :data="tableData.rows"  style="width: 100%">
          <el-table-column  prop="id"  label="编号"  width="180">  </el-table-column>
          <el-table-column  prop="loginName"  label="姓名"  width="180"> </el-table-column>
          <el-table-column  prop="gender" label="性别">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.gender==='0'">男</el-tag>
                <el-tag type="danger" v-else >女</el-tag>
             </template>

          </el-table-column>
    </el-table>

   <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.pageNumber"
        :page-sizes="[1,10, 20, 30, 40]"
        :page-size="queryForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total">
      </el-pagination>



  </div>
</template>

<script>
  import { dataApi } from '@/api/assetManage.js'

  export default {
      data() {
        return {
          queryForm: {
            pageNumber:1,
            pageSize:10,
          },
          // 分页表格分页的结果对象
           tableData: {
             total: 20,
             rows: [
               {id:1,name:'小张1',sex:'0'},
               {id:2,name:'小张2',sex:'1'},
               {id:3,name:'小张3',sex:'0'},
               {id:4,name:'小张4',sex:'1'}
             ]
           },
        }
      },
      methods: {
        //点击查询按钮
        handlerQuery(){
          this.queryForm.pageNumber =1
          this.fetchData()
        },
        //每页几笔发生变化
       handleSizeChange(val) {
          this.queryForm.pageSize =val
          this.queryForm.pageNumber =1
          this.fetchData()
       },
       //当前页码发生变化
       handleCurrentChange(val) {
          this.queryForm.pageNumber =val
          this.fetchData()
       },
       //定义一个函数
       fetchData(){
         //调用api
         dataApi(this.queryForm).then(resp=> {
           console.log(resp)
           this.tableData.rows=resp.data.list
           this.tableData.total = resp.data.total
         })
       }
     },
     //初始化调用方法
     created() {
       this.fetchData()
     }

    }
</script>

<style>
</style>
